import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { ExternalControlComponent } from './external-control/external-control.component';

export const SwitchConfig = {
  location: 'Switch',
  description: '用于控制某一功能的启用或者关闭。',
  description_en: 'Used to control the enabling or disabling of a feature.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/switch/demo1/demo1.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '最简单的使用，通过 ngModel 配置开关状态，可双向绑定。',
      demoDescription_en: 'The simplest use, through ngModel configuration switch state, can be bound in two directions.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/switch/demo2/demo2.component',
      demoTitle: '自定义',
      demoTitle_en: 'Customize',
      demoDescription: '可自定义标签, 支持字符串和模板。',
      demoDescription_en: 'Customizable tags, support for strings and templates.',
      devDebug: true,
    },
    {
      demo: ExternalControlComponent,
      codePath: 'showcase/switch/external-control/external-control.component',
      demoTitle: '外部控制',
      demoTitle_en: 'External Control',
      demoDescription: '设置属性 lvControl 为 true，开关状态由外部完全控制，在状态切换时可实现异步/同步的事件处理。',
      demoDescription_en:
        'Set the property lvControl to true, the switch state is completely controlled by the outside, and asynchronous/synchronous event processing can be realized when the state is switched.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-switch',
  snippet: `<lv-switch [(ngModel)]="\${1:status}"></lv-switch>`,
  api: [
    {
      attribute: 'ngModel',
      type: 'boolean',
      default: 'false',
      description: '当前开关的状态值，可双向绑定。',
      description_en: 'The status value of the current switch can be bound in both directions.',
    },
    {
      attribute: 'lvSize',
      type: 'default | large',
      default: 'default',
      description: `开关大小。`,
      description_en: `Size of switch.`,
    },
    {
      attribute: 'lvLoading',
      type: 'boolean',
      default: 'false',
      description: `显示 loading 状态。`,
      description_en: `Display loading status.`,
    },
    {
      attribute: 'lvDisabled',
      type: 'boolean',
      default: 'false',
      description: '是否禁用开关。',
      description_en: 'Whether to disable the switch?',
    },
    {
      attribute: 'lvLabelOn',
      type: 'string | TemplateRef',
      default: 'null',
      description: 'Switch 开启时的 label，可以是字符串或者模板。',
      description_en: 'The label when the Switch is turned on, which can be a string or a template.',
    },
    {
      attribute: 'lvLabelOff',
      type: 'string | TemplateRef',
      default: 'null',
      description: 'Switch 关闭时的 label，可以是字符串或者模板。',
      description_en: 'The label when the Switch is closed, which can be a string or a template.',
    },
    {
      attribute: 'lvControl',
      type: 'boolean',
      default: 'false',
      description:
        '开关状态完全控制，设置为 true 时，开关状态由外部完全控制，在状态切换时可实现异步/同步的事件处理。注：此时 ngModel 属性的双向绑定无效，只能作为输入属性使用。',
      description_en:
        'The switch state is fully controlled. When set to true, the switch state is fully controlled by the outside, and asynchronous/synchronous event processing can be realized when the state is switched. Note: The two-way binding of the ngModel property is invalid at this time, and can only be used as an input property.',
    },
  ],
  event: [
    {
      event: 'ngModelChange',
      parameter: `value: string`,
      description: '当开关切换后的回调函数。参数 value 为开关切换后的状态值。',
      description_en:
        'The callback function when the switch is switched. The parameter value is the state value after the switch is switched.',
    },
  ],
};
